<template>
  <div>
    <c-table class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:warranty_method="scope">
        <el-tooltip effect="light" :content="scope.row.warranty_method" placement="bottom">
          <span>{{ scope.row.warranty_method | substr(19) }}</span>
        </el-tooltip>
      </template>
    </c-table>

    <div class="mt-3 d-flex justify-content-center">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getParams,
  ledgerTableColumns,
  reportDataAdapter,
  reportDataExportAdapter,
} from '@/credit/views/city/report/reportMixins'
import { exportExcel } from '@/credit/mixin/taskTableProvinceUnion'

export default {
  components: {},
  props: {
    reportType: Number,
    formVisible: {
      type: Boolean,
      default: true,
    },
    queryParams: {
      type: Object,
      default: () => ({}),
    },
    orderParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
      },

      order: {},
      tableName: 'market_project',
      totalCount: 0,
      tableData: [],
      tableColumns: ledgerTableColumns,

      exportLoading: false,
    }
  },
  computed: {
    ...mapGetters(['org', 'clientId']),
    innterTitle() {
      return this.org.orgName + '存量业务项目台账表'
    },
  },
  watch: {
    queryParams: {
      handler: 'queryParser',
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index

      this.loading = true
      const [res] = await this.fetchData(this.params)
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = (data.data || []).map(reportDataAdapter)

      this.$emit('getData', { totalCount: this.totalCount })
    },
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, {
          ...this.orderParams,
          ...this.order,
        })
      )
    },

    queryParser() {
      this.params = {
        index: 1,
        size: 10,
        isBIQuery: 1,
        ...getParams({
          clientId: this.clientId,
          ...this.queryParams,
        }),
      }
      this.getData()
    },

    // 导出
    async exportExcel(filename) {
      return new Promise(resolve => {
        this.exportLoading = true
        exportExcel({
          filename,
          tableColumns: this.tableColumns,
          params: this.params,
          dataAdapter: reportDataExportAdapter,
          fetchData: this.fetchData,
          onLoaded: () => {
            this.exportLoading = false
            resolve()
          },
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
